<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const isCollapse = ref(true)
const toggleActive = () => {
  isCollapse.value = !isCollapse.value
};

const handleSelect = (index) => {
  router.push(index);
}


</script>

<template>
  <div class="NavContainer">
    <div class="moreBox">
      <!-- 显示更多图标识 -->
      <el-icon class="more" @click="toggleActive()">
        <Grid />
      </el-icon>
      <!-- 导航栏logo -->
      <div class="logoBox">
        <img src="../assets/layout/Logo.png" alt="">
      </div>
    </div>
    <!-- 导航菜单 -->
    <el-menu text-color="#3c436d" :default-active="$route.path" active-text-color="#b19770" class="menu"
      background-color="#ffffff" :collapse="isCollapse" @select="handleSelect" router>
      <!-- 首页 -->
      <el-menu-item index="/layout">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <!-- 方志典籍浏览 -->
      <el-sub-menu index="方志">
        <template #title>
          <el-icon>
            <Search />
          </el-icon>
          <span>方志典籍浏览</span>
        </template>
        <el-menu-item index="/record/view">
          <el-icon>
            <document />
          </el-icon>
          <span>按地区浏览</span>
        </el-menu-item>
        <!-- <el-menu-item index="/record/region">
          <el-icon>
            <document />
          </el-icon>
          <span>按类别浏览</span>
        </el-menu-item>
        <el-menu-item index="/record/region">
          <el-icon>
            <document />
          </el-icon>
          <span>按时间浏览</span>
        </el-menu-item> -->
      </el-sub-menu>
      <!-- 用户服务 -->
      <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <Position />
          </el-icon>
          <span>用户服务</span>
        </template>
        <el-menu-item index="/service/helpCenter">
          <el-icon>
            <Phone />
          </el-icon>
          <span>帮助中心</span>
        </el-menu-item>
        <!-- <el-menu-item index="/service/contactUs">
          <el-icon>
            <document />
          </el-icon>
          <span>联系我们</span>
        </el-menu-item> -->
        <el-menu-item index="/login">
          <el-icon>
            <User />
          </el-icon>
          <span>注册/登录</span>
        </el-menu-item>
      </el-sub-menu>
      <!-- 学术交流 -->
      <el-sub-menu index="4">
        <template #title>

          <el-icon>
            <ChatDotSquare />
          </el-icon>
          <span>学术交流</span>
        </template>
        <el-menu-item index="/exchange/discussionForum">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-people1"></use>
            </svg>
          </el-icon>
          <span>论坛讨论</span>
        </el-menu-item>
        <el-menu-item index="/exchange/professor">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuanjia"></use>
            </svg>
          </el-icon>
          <span>专家访谈</span>
        </el-menu-item>
        <el-menu-item index="/exchange/aboutUs">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wink"></use>
            </svg>
          </el-icon>
          <span>关于我们</span>
        </el-menu-item>
        <el-menu-item index="/exchange/feedback">
          <el-icon>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-write"></use>
            </svg>
          </el-icon>
          <span>反馈</span>
        </el-menu-item>
      </el-sub-menu>

    </el-menu>


  </div>



</template>

<style scoped lang="scss">
.NavContainer {
  width: 100%;
  height: 30px;
  position: fixed;
  width: 100%;
  background: transparent;
  z-index: 9999999;
  top: 0;
border-radius: 5px;
  .menu {
    
    position: relative;
    transform: translateY(30px);
  }

  .menu:not(.el-menu--collapse) {
    position: fixed;
    width: 150px;
    font-size: 0.16rem;
  }
}

.moreBox {
  width: 100%;
  height: 25px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 99999;
  transition: opacity 0.3s ease; /* 添加渐变效果 */
  .el-icon.more {
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
    border-radius: 5px;
  }

  .logoBox {
    margin: 0px 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
      display: block;
      padding-top: 7px;
      height: 70px;
    }
  }

}



// 菜单样式
.el-menu {
  width: 25px;
  height: auto;
}
.el-menu-item:hover {
  outline: 0 !important;
  color: #409EFF !important;
}
.el-menu-item {
  background-color: whitesmoke !important;
}
.el-sub-menu__title {
  padding: 0px;
}

div.el-sub-menu__title.el-tooltip__trigger {
  padding: 0px;
}

// .el-sub-menu {
//   height: 25px;
//   width: 100%;
//   font-size: 0.16rem;
// }
:deep(.el-sub-menu__title) {

  height: 25px;
  width: 100%;
  font-size: 0.16rem;

  span {
    margin: 5px 0px;
    height: 1px;
    width: 1px;
    font-size: 10px;
    transform: translateY(-30px);
    text-align: center;
  }


}

:deep(.el-sub-menu .el-sub-menu__icon-arrow) {
  margin-right: -80px;
}



:deep(div.el-sub-menu__title.el-tooltip__trigger) {
  padding-left: 5px;
  width: 25px;
  height: 25px;

}

.el-menu--popup {
  width: 25px;
  height: 75px;
}

.el-menu-item {
  height: 25px;
  width: 100%;
  padding-left: 5px;
  font-size: 8px;
}

:deep(.el-menu-item.is-active .el-icon .icon) {
  color: #b19770;
}

// 导航小图标
.el-menu--collapse>.el-menu-item [class^=el-icon],
.el-menu--collapse>.el-menu-item-group>ul>.el-sub-menu>.el-sub-menu__title [class^=el-icon],
.el-menu--collapse>.el-sub-menu>.el-sub-menu__title [class^=el-icon] {
  width: 10px;
}
</style>
//设置滑动一定像素后隐藏导航栏
